<!-- javascrip for ajax -->
<script src="resources/js/jquery.js"></script>
<script src="resources/js/account_admin.js"></script>
<div class="row">
	<div class="col-sm-12 account-info">
		<div class="panel panel-primary">
			
			<div class="panel-body">
				<ul class="nav nav-tabs" role="tablist" id="myTab">
					<li class="active"><a href="#newTab" onclick="loadTab(1)"
						role="tab" data-toggle="tab">New</a></li>
					<li><a href="#activeTab" role="tab" onclick="loadTab(2)"
						data-toggle="tab">Active</a></li>
					<li><a href="#disableTab" role="tab" onclick="loadTab(4)"
						data-toggle="tab">Disable</a></li>
					<li><a href="#markAsDisableTab" onclick="loadTab(3)"
						role="tab" data-toggle="tab">Mark As Disable</a></li>

				</ul>
				<div class="tab-content">
					<div class="tab-pane active table-responsive" id="newTab">
						<!-- //////////////New Tab//////////////// -->
						<div class="row">
							<div class="col-sm-12">
								<div class="main-content">

									<!--end of search-->
									<div class="row">
										<div class="col-sm-12 account-detail">
											<div class="panel panel-primary account-table"
												style="border: 0px">

												<div class="table-responsive">
													<table id="example" class="table" cellspacing="0"
														width="100%">
														<thead>
															<tr>
																<th><div id="checkAllArea1" style="text-align: left"></div></th>
																<th>Account Number</th>
																<th>First Name</th>
																<th>Last Name</th>
																<th>State</th>
															</tr>

														</thead>
														<tbody id="tbodyNewTab">

														</tbody>
													</table>
													<div align="right">
														<button style="margin: 10px" class="btn btn-default"
															id="btnActive" onclick="transferState(2,1);">Active</button>
														<button style="margin: 10px" class="btn btn-default"
															id="btnRemove" onclick="removeAccountInfo(1)">Remove</button>
													</div>
												</div>
											</div>
											<!--end of panel detail-->
										</div>
										<div class="row"></div>

									</div>

									<!--end of row info-->
								</div>
							</div>
						</div>
						<!-- //////////////////////////////// -->
					</div>
					<div class="tab-pane" id="activeTab">
						<!-- //////////////Active Tab//////////////// -->
						<div class="row">
							<div class="col-sm-12">
								<div class="main-content">

									<!--end of search-->
									<div class="row">
										<div class="col-sm-12 account-detail">
											<div class="panel panel-primary account-table"
												style="border: 0px">

												<div class="table-responsive">
													<table id="example" class="table" cellspacing="0"
														width="100%">
														<thead>
															<tr>
																<th><div id="checkAllArea2" style="text-align: left"></div></th>
																<th>Account Number</th>
																<th>First Name</th>
																<th>Last Name</th>
																<th>State</th>
															</tr>

														</thead>
														<tbody id="tbodyActiveTab">

														</tbody>
													</table>
													<div align="right">
														<button style="margin: 10px" class="btn btn-default"
															id="btnDisable" onclick="transferState(4,2);">Disable</button>
													</div>
												</div>
											</div>
											<!--end of panel detail-->
										</div>
										<div class="row"></div>

									</div>

									<!--end of row info-->
								</div>
							</div>
						</div>
						<!-- //////////////////////////////// -->
					</div>
					<div class="tab-pane" id="disableTab">
						<!-- //////////////Disable Tab//////////////// -->
						<div class="row">
							<div class="col-sm-12">
								<div class="main-content">

									<!--end of search-->
									<div class="row">
										<div class="col-sm-12 account-detail">
											<div class="panel panel-primary account-table"
												style="border: 0px">

												<div class="table-responsive">
													<table id="example" class="table" cellspacing="0"
														width="100%">
														<thead>
															<tr>
																<th><div id="checkAllArea4" style="text-align: left"></div></th>
																<th>Account Number</th>
																<th>First Name</th>
																<th>Last Name</th>
																<th>State</th>
															</tr>

														</thead>
														<tbody id="tbodyDisableTab">

														</tbody>
													</table>
													<div align="right">
														<button style="margin: 10px" class="btn btn-default"
															id="btnRemoveable" onclick="transferState(5,4)">Removeable</button>
														<button style="margin: 10px" class="btn btn-default"
															id="btnActiveReturn" onclick="transferState(2,4)">Active</button>
													</div>
												</div>
											</div>
											<!--end of panel detail-->
										</div>
									</div>

									<!--end of row info-->
								</div>
							</div>
						</div>
						<!-- //////////////////////////////// -->
					</div>
					<div class="tab-pane" id="markAsDisableTab">
						<!-- //////////////Mark As Disable Tab//////////////// -->
						<div class="row">
							<div class="col-sm-12">
								<div class="main-content">

									<!--end of search-->
									<div class="row">
										<div class="col-sm-12 account-detail">
											<div class="panel panel-primary account-table"
												style="border: 0px">

												<div class="table-responsive">
													<table id="example" class="table" cellspacing="0"
														width="100%">
														<thead>
															<tr>
																<th><div id="checkAllArea3" style="text-align: left"></div></th>
																<th>Account Number</th>
																<th>First Name</th>
																<th>Last Name</th>
																<th>State</th>
															</tr>

														</thead>
														<tbody id="tbodyMarkAsDisableTab">

														</tbody>
													</table>
													<div align="right">
														<button style="margin: 10px" class="btn btn-default"
															id="btnAgree" onclick="transferState(4,3);">Agree</button>
														<button style="margin: 10px" class="btn btn-default"
															id="btnDisagree" onclick="transferState(2,3);">Disagree</button>
													</div>
												</div>
											</div>
											<!--end of panel detail-->
										</div>
										<div class="row"></div>

									</div>

									<!--end of row info-->
								</div>
							</div>
						</div>
						<!-- //////////////////////////////// -->
					</div>
				</div>

				<script type="text/javascript">
					$(document).ready(
							function() {
								$('a[data-toggle="tab"]').on('shown.bs.tab',
										function(e) {
											e.target // activated tab
											e.relatedTarget // previous tab
										})
							});
				</script>
			</div>
		</div>
	</div>
</div>